// src/composables/useEcharts.js

import { ref, onMounted, onUnmounted, shallowRef } from 'vue'
import * as echarts from 'echarts'

/**
 * 封装 ECharts 的 Hook
 * @param {Object} options - ECharts 配置项
 * @param {boolean} [autoResize=true] - 是否自动监听窗口大小并重绘图表
 * @returns {{ chartRef: Ref<HTMLElement | null>, chartInstance: ShallowRef<echarts.ECharts | null> }}
 */
export function useEcharts(options, autoResize = true) {
  // `chartRef` 用于在模板中绑定 DOM 元素
  const chartRef = ref(null);
  // `chartInstance` 用于存储 ECharts 实例，使用 shallowRef 避免深层响应式带来的性能开销
  const chartInstance = shallowRef(null);

  // resize 函数
  const resizeChart = () => {
    if (chartInstance.value) {
      chartInstance.value.resize();
    }
  };

  onMounted(() => {
    if (chartRef.value) {
      // 初始化 ECharts 实例
      chartInstance.value = echarts.init(chartRef.value);
      // 设置图表配置
      chartInstance.value.setOption(options);
      
      // 如果开启了自动重绘，则添加监听器
      if (autoResize) {
        window.addEventListener('resize', resizeChart);
      }
    }
  });

  onUnmounted(() => {
    // 组件卸载时销毁实例并移除监听器
    if (chartInstance.value) {
      chartInstance.value.dispose();
    }
    if (autoResize) {
      window.removeEventListener('resize', resizeChart);
    }
  });

  return { chartRef, chartInstance };
}